<template>
  <div class="custom-flex-cont-vertical">
    <el-form :inline="true" size="mini" class="custom-form" label-width="auto">
      <el-form-item label="路由名称">
        <el-input v-model="queryParams.routName" placeholder="输入名称关键词"></el-input>
      </el-form-item>
      <el-form-item label="路由标识">
        <el-input v-model="queryParams.routId" placeholder="输入标识关键词"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query()">查询</el-button>
      </el-form-item>
    </el-form>
    <!--工具栏-->
    <el-row class="custom-row">
      <el-button size="mini" plain type="primary" @click="openAddEdit()" v-if="hasPerm('route-add')"><i class="fa fa-plus-circle"></i>&nbsp;新增路由</el-button>
      <el-button size="mini" plain v-bind:disabled="selectedRows.length==0" @click="enablePerms(null, true)" v-if="hasPerm('route-enable')"><i class="fa fa-unlock"></i>&nbsp;启用路由</el-button>
      <el-button size="mini" plain v-bind:disabled="selectedRows.length==0" @click="enablePerms(null, false)" v-if="hasPerm('route-enable')"><i class="fa fa-lock"></i>&nbsp;禁用路由</el-button>
      <el-button size="mini" plain type="danger" v-bind:disabled="selectedRows.length==0" @click="deletePerms()" v-if="hasPerm('route-del')"><i class="fa fa-trash"></i>&nbsp;删除路由</el-button>
      <el-divider direction="vertical"></el-divider>
      <el-button size="mini" plain type="success" @click="refreshRouter" v-if="hasPerm('route-refresh')"><i class="fa fa-refresh"></i>&nbsp;刷新路由</el-button>

    </el-row>
    <el-alert
      type="info"
      :closable="false"
      style="margin: 10px 0 0 0"
      show-icon>
      <template slot="title">
        网关路由、接口API、访问控制修改调整之后，要想生效需点击<b>「刷新网关」</b>。
      </template>
    </el-alert>
    <!--查询结果列表-->
    <div class="custom-flex-cont-vertical fit-all custom-shadow">
      <el-table
        :data="tableData"
        @selection-change="multiSelectedChange">
        <template slot="empty">
          <empty-tip></empty-tip>
        </template>
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          type="index"
          width="40">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="routName"
          label="路由名称">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="routId"
          label="路由标识">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="routPath"
          label="配对前缀">
        </el-table-column>
        <el-table-column
          prop="stripPrefix"
          label="忽略前缀">
          <template slot-scope="scope">
            {{scope.row.stripPrefix>0?('前'+scope.row.stripPrefix+'个'):'不忽略'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="routType"
          label="路由方式">
          <template slot-scope="scope">
            {{routTypeOpts[scope.row.routType]}}
          </template>
        </el-table-column>
        <el-table-column
          prop="routUrl"
          label="代理地址">
          <template slot-scope="scope">
            {{scope.row.routType+'://'+scope.row.routUrl}}
          </template>
        </el-table-column>
        <el-table-column
          prop="routRetry"
          label="失败重试">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.routRetry>0"
              title="重试规则"
              trigger="hover">
              <table class="info-table">
                <tr>
                  <th>失败状态码</th>
                  <td>
                    <span v-if="getSplitList(scope.row.retrySeries).length===0">无</span>
                    <el-tag v-else size="small" v-for="(item, i) in getSplitList(scope.row.retrySeries)" :key="i" style="margin-right:5px;">{{item}}</el-tag>
                  </td>
                </tr>
                <tr>
                  <th>失败状态</th>
                  <td>
                    <span v-if="getSplitList(scope.row.retryStatus).length===0">无</span>
                    <el-tag v-else size="small" v-for="(item, i) in getSplitList(scope.row.retryStatus)" :key="i" style="margin-right:5px;">{{item}}</el-tag>
                  </td>
                </tr>
                <tr>
                  <th>请求方法</th>
                  <td>
                    <span v-if="getSplitList(scope.row.retryMethod).length===0">无</span>
                    <el-tag v-else size="small" v-for="(item, i) in getSplitList(scope.row.retryMethod)" :key="i" style="margin-right:5px;">{{item}}</el-tag>
                  </td>
                </tr>
                <tr>
                  <th>方法报错</th>
                  <td>
                    <span v-if="getSplitList(scope.row.retryExcep).length===0">无</span>
                    <el-tag v-else size="small" v-for="(item, i) in getSplitList(scope.row.retryExcep)" :key="i" style="margin-right:5px;">{{item}}</el-tag>
                  </td>
                </tr>
              </table>
              <span slot="reference" class="text-primary" style="cursor: help">
                {{scope.row.routRetry+'次'}}&nbsp;<i class="fa fa-question-circle-o"></i>
              </span>
            </el-popover>

            <span v-else>不重试</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="state"
          label="状态">
          <template slot-scope="scope">
            <el-tag type="success" size="medium" v-if="scope.row.state===1">启用</el-tag>
            <el-tag type="danger" size="medium" v-else>禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="130">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="修改" v-if="hasPerm('route-update')">
              <el-button type="text" @click="openAddEdit(scope.row)"><i class="fa fa-edit"></i></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="禁用" v-if="hasPerm('route-enable')&&scope.row.state===1">
              <el-button type="text" @click="enablePerms(scope.row.id, false)"><i class="fa fa-ban text-danger"></i></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="启用" v-if="hasPerm('route-enable')&&scope.row.state===0">
              <el-button type="text" @click="enablePerms(scope.row.id, true)"><i class="fa fa-check-circle text-success"></i></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" v-if="hasPerm('route-del')">
              <el-button type="text" @click="deletePerms(scope.row.id)"><i class="fa fa-trash text-danger"></i></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="custom-pagination"
        @current-change="query"
        :current-page.sync="queryParams.pageNumber"
        :page-size="queryParams.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="tableDataTotal"
        style="text-align:right;">
      </el-pagination>
    </div>
    <!--新增/修改-->
    <add-edit-router-dialog v-if="showEditForm" :show.sync="showEditForm" :editData="editData"></add-edit-router-dialog>
  </div>
</template>

<script>
  import AddEditRouterDialog from './AddEditRouterDialog'

  export default {
    name: "index",
    components: {
      AddEditRouterDialog
    },
    data() {
      return {
        showEditForm: false,
        editData: null,
        queryParams: {
          routId: '',
          routName:'',
          state:'',
          pageNumber: 1,
          pageSize: 10
        },
        tableData: [],
        tableDataTotal: 0,
        selectedRows: [],
        routTypeOpts: {
          'lb': '注册服务名',
          'http': 'HTTP',
          'https': 'HTTPS'
        }
      }
    },
    mounted: function(){
      this.query();
    },
    methods: {
      openAddEdit: function(data){
        if(data)
          this.editData = data;
        else
          this.editData = null;
        this.showEditForm = true;
      },
      query: function(currPage){
        if(!currPage)
          this.queryParams.pageNumber = 1;
        this.loading = true;
        this.api.post('/bucket-system/gateway/router/page', this.queryParams)
          .then((data) => {
            this.tableData = data.data.records;
            this.tableDataTotal = parseInt(data.data.total);
            this.loading = false;
          });
      },
      multiSelectedChange: function(val){
        this.selectedRows = val;
      },
      deletePerms: function(id){
        this.$confirm('该操作是物理删除，不可复原，是否确认删除？')
          .then(() => {
            let _ids = [];
            if(!id && this.selectedRows.length>0){
              this.selectedRows.forEach(function(_s, index, arr){
                _ids.push(_s.id);
              });
            }else
              _ids.push(id);
            this.api.post('/bucket-system/gateway/router/del', {id: _ids.join(',')})
              .then((data) => {
                if(data.result=== 200){
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  });
                  this.query();
                }else{
                  this.$message.error(data.data);
                }
              });
            done();
          });
      },
      enablePerms: function(id, enable){
        let _ids = [];
        let _url = '/bucket-system/gateway/router/disable';
        if(!id && this.selectedRows.length>0){
          this.selectedRows.forEach(function(_s, index, arr){
            _ids.push(_s.id);
          });
        }else
          _ids.push(id);
        if(enable)
          _url = '/bucket-system/gateway/router/enable';
        this.api.post(_url, {id: _ids.join(',')})
          .then((data) => {
            if(data.result=== 200){
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.query();
            }else{
              this.$message.error(data.data);
            }
          });
      },
      getSplitList(txt) {
        return txt.split(',');
      },
      refreshRouter() {
        this.api.post('/actuator/open/refresh', {})
          .then((data) => {
            if(data.code===200){
              this.$message({
                message: "刷新成功",
                type: 'success'
              });
              this.query();
            }else{
              this.$message.error(data.data);
            }
          });
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
